<template>
    <div class="app-container">
      <!-- 输入表单 -->
      <el-form label-width="120px">
        <el-form-item label="位置名称">
          <el-input v-model="playerPlace.name"/>
        </el-form-item>
        
        <el-form-item label="位置描述">
          <el-input type="textarea" v-model="playerPlace.describe"  :rows="5"/>
        </el-form-item>

        <el-form-item label="游戏名">
            <el-select v-model="playerPlace.gameId" clearable placeholder="请选择">
                <el-option
                v-for="item in gameList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
                </el-option>
            </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="saveOrUpdate()">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </template>
  
  
  <script>
  import playerPlaceApi from "@/api/player/playerPlace";
  import gameApi from "@/api/game/game";
  export default {
      data() {
          return {
              gameList:[],
              playerPlace:{
              }
          }
      },
      created() {
        gameApi.getGameList()
            .then((response) => {
                this.gameList = response.data
            })
        if(this.$route.params.id){
          const id = this.$route.params.id;
          this.fetchDataById(id)
        }
      },
      methods: {
        fetchDataById(id){
            playerPlaceApi.getPalyerPlaceById(id)
            .then(response => {
                this.playerPlace = response.data
            })
        },
        //添加
        save(){
            playerPlaceApi.savePalyerPlace(this.playerPlace)
          .then((response) => {
              this.$message({
                  type: 'success',
                  message: '添加成功!'
              });
              //跳转列表页面
              this.$router.push({path:'/player/playerPlaceList'})
          })
        },
        //修改
        update(){
          playerPlaceApi.updatePlayerPlace(this.playerPlace)
          .then((response) => {
              this.$message({
                  type: 'success',
                  message: '修改成功!'
              });
              //跳转列表页面
              this.$router.push({path:'/player/playerPlaceList'})
          })
        },
        saveOrUpdate(){
          if(this.playerPlace.id){
            this.update()
          }else{
            this.save()
          }
        }
      },
      
  }
  </script>